<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>zTreeTest</title>
        <link rel="stylesheet" href="../../js/zTree/css/demo.css" type="text/css">
        <link rel="stylesheet" href="../../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="../../js/zTree/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../../js/zTree/js/jquery.ztree.core.js"></script>
        <script language="JavaScript">
            // 参考地址http://www.treejs.cn/v3/demo.php#_101
            var zTreeObj;
            // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
            var setting = {
                view: {
                    selectedMulti: true, // 设置是否能够同时选中多个节点
                    showIcon: true,  // 设置是否显示节点图标
                    showLine: true,  // 设置是否显示节点与节点之间的连线
                    showTitle: true,  // 设置是否显示节点的title提示信息
                },
                data: {
                    simpleData: {
                        enable: false, // 设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
                        idKey: "id",  // 设置启用简单数据格式时id对应的属性名称
                        pidKey: "pId" // 设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
                    }
                },
                check: {
                    enable: true   // 设置是否显示checkbox复选框
                },
                callback: {
                    onClick: onClick,    // 定义节点单击事件回调函数
                    onRightClick: OnRightClick, // 定义节点右键单击事件回调函数
                    beforeRename: beforeRename, // 定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法
                    //onDblClick: onDblClick,  // 定义节点双击事件回调函数
                    onCheck: onCheck    // 定义节点复选框选中或取消选中事件的回调函数
                },
                async: {
                    enable: true,      // 设置启用异步加载
                    type: "get",      // 异步加载类型:post和get
                    contentType: "application/json", // 定义ajax提交参数的参数类型，一般为json格式
                    url: "/Design/Get",    // 定义数据请求路径
                    autoParam: ["id=id", "name=name"] // 定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称
                }
            };
            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
            var zNodes = [
                {
                    name: "test1", open: true, children: [
                        {name: "test1_1"}, {name: "test1_2"}]
                },
                {
                    name: "test2", open: true, children: [
                        {name: "test2_1"}, {name: "test2_2"}]
                }
            ];

            $(document).ready(function () {
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });

            /*var treeNode = {
                name,  // 节点显示的文本
                    checked, // 节点是否勾选，ztree配置启用复选框时有效
                    open,  // 节点是否展开
                    icon,  // 节点的图标
                    iconOpen, // 节点展开式的图标
                    iconClose, // 节点折叠时的图标
                    id,   // 节点的标识属性，对应的是启用简单数据格式时idKey对应的属性名，并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
                    pId,  // 节点parentId属性，命名规则同id
                    children, // 得到该节点所有孩子节点，直接下级，若要得到所有下属层级节点，需要自己写递归得到
                    isParent, // 判断该节点是否是父节点，一般应用中通常需要判断只有叶子节点才能进行相关操作，或者删除时判断下面是有子节点时经常用到。
                    //getPath() // 得到该节点的路径，即所有父节点，包括自己，此方法返回的是一个数组，通常用于创建类似面包屑导航的东西A-->B-->C
            };*/

            function onClick(e, treeId, treeNode) {
                if (treeNode.isParent) // 如果不是叶子结点，结束
                    return;
                alert(treeNode.name); // 获取当前结点上的相关属性数据，执行相关逻辑
            };

            function onCheck() {
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); // 获取树对象
                var nodes = treeObj.getChangeCheckedNodes();  // 获取勾选状态改变的节点
                var designIds = [];
                var status = 0;         // 定义初始勾选状态为未勾选
                if (nodes[0].checked)
                    status = 1;         // 如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。
                $.each(nodes, function (i, item) {
                    designIds.push(item.id);      // 将状态改变的节点id输出到数组
                    item.checkedOld = item.checked;    // 这句话很关键，将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相比较。
                })
                $.ajax({
                    type: "Post",
                    url: "/Design/GetRelationComponentIdsByDesigns",
                    data: {"designIds": designIds},
                    success: function (data) {
                        RealBimOcx.BatchAddSubClrInfoBegin();
                        $.each(data.result, function (i, item) {
                            if (status == 1)           // 这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作。
                                RealBimOcx.AddSubClrInfo(item, 255, 255, 0);
                            else
                                RealBimOcx.AddSubClrInfo(item, 0, 255, 0);
                            if (i % 100 == 0) {
                                RealBimOcx.BatchAddSubClrInfoEnd();
                                RealBimOcx.BatchAddSubClrInfoBegin();
                            }

                        })
                        RealBimOcx.BatchAddSubClrInfoEnd();

                    }
                })
            };

            // 右键单击回调函数
            function OnRightClick(event, treeId, treeNode) {
                $("#treeZo").hide();
                if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                    zTree.cancelSelectedNode();
                    showRMenu("root", event.clientX, event.clientY); // 根据鼠标位置显示右键操作面板
                } else if (treeNode && !treeNode.noR) {
                    zTree.selectNode(treeNode);
                    showRMenu("node", event.clientX, event.clientY);
                }
                $("#treeZo").show();
            }

            // 根据节点类型，控制右键操作菜单哪些可用哪些不可用
            function showRMenu(type, x, y) {
                $("#rMenu ul").show();
                if (type == "root") {
                    $("#m_del").hide();
                    $("#m_edit").hide();
                    $("#m_left").hide();
                    $("#m_right").hide();
                    $("#m_up").hide();
                    $("#m_down").hide();
                    $("#m_add").addClass('mboder');
                } else {
                    $("#m_del").show();
                    $("#m_edit").show();
                    $("#m_left").show();
                    $("#m_right").show();
                    $("#m_up").show();
                    $("#m_down").show();
                    $("#m_add").removeClass('mboder');
                }
                rMenu.css({"top": y + "px", "left": x + "px", "visibility": "visible"});
                $("body").bind("mousedown", onBodyMouseDown);
            }

            // 以藏右键面板
            function hideRMenu() {
                if (rMenu) rMenu.css({"visibility": "hidden"});
                $("body").unbind("mousedown", onBodyMouseDown);
            }

            // 单击页面其他位置 隐藏右键面板
            function onBodyMouseDown(event) {
                if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                    rMenu.css({"visibility": "hidden"});
                }
            }

            // 编辑并保存节点
            function beforeRename(treeId, treeNode, newName, isCancel) {
                if (newName.length == 0) { // 节点名称判断
                    alert("不能为空。");
                    return false;
                } else {
                    $.ajax({     // 数据入库
                        type: "Post",
                        url: "/Design/InsertOrUpdate",
                        data: {"dto": {"Id": treeNode.id, "ParentId": treeNode.pid, "Name": newName}},
                        success: function (data) {
                            if (data.result == "Faild") {
                                layerAlert("保存失败。");
                                return false;
                            } else {
                                treeNode.id = data.result; // 将返回的id赋值给当前结点
                                return true;
                            }

                        }
                    });
                }
            };

            function removeTreeNode() {
                hideRMenu();
                var nodes = zTree.getSelectedNodes();
                if (nodes && nodes.length > 0) {
                    if (nodes[0].children && nodes[0].children.length > 0) {
                        alert("包含下级，无法删除。");
                    } else {
                        if (confirm("该操作会将关联数据同步删除，是否确认删除？") == true) {
                            $.ajax({
                                type: "Post",
                                url: "/Design/Delete",
                                data: {"id": nodes[0].id},
                                success: function (data) {
                                    if (data.result == "Success") {
                                        zTree.removeNode(nodes[0]);
                                    } else {
                                        alert("删除失败。");
                                    }
                                }
                            });
                        }
                        ;
                    }
                }
            };

            // 增加节点
            function addTreeNode() {
                hideRMenu();
                var name = new Date().getTime(); // 利用时间戳生成节点名称，保证节点名称唯一
                var newNode = {
                    name: name
                };
                if (zTree.getSelectedNodes()[0]) {
                    newNode.checked = zTree.getSelectedNodes()[0].checked;
                    newNode.pid = zTree.getSelectedNodes()[0].id;
                    zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
                } else {
                    zTree.addNodes(null, newNode);
                }
                var node = zTree.getNodeByParam("name", name, null); // 得到新增加的节点
                zTree.selectNode(node); // 选中新增加的节点
                zTree.editName(node);  // 让新增加的节点处于编辑状态
            }

            function editTreeNode() {
                var nodes = zTree.getSelectedNodes(); // 得到选中节点集合
                if (nodes && nodes.length > 0) {
                    var parent = nodes[0].getParentNode(); // 得到选中节点的父节点
                    if (parent) {
                        nodes[0].pid = parent.id; // 如果选中节点父节点存在，将当前结点的pid属性值设置为父节点的id
                    }
                    zTree.editName(nodes[0]); // 让选中节点处于编辑状态
                }
                hideRMenu();  // 隐藏右键面板
            };

            // 编辑并保存节点
            function beforeRename(treeId, treeNode, newName, isCancel) {
                if (newName.length == 0) { // 节点名称判断
                    alert("不能为空。");
                    return false;
                } else {
                    $.ajax({     // 数据入库
                        type: "Post",
                        url: "/Design/InsertOrUpdate",
                        data: {"dto": {"Id": treeNode.id, "ParentId": treeNode.pid, "Name": newName}},
                        success: function (data) {
                            if (data.result == "Faild") {
                                layerAlert("保存失败。");
                                return false;
                            } else {
                                treeNode.id = data.result; // 将返回的id赋值给当前结点
                                return true;
                            }

                        }
                    });
                }
            };

            function removeTreeNode() {
                hideRMenu();
                var nodes = zTree.getSelectedNodes();
                if (nodes && nodes.length > 0) {
                    if (nodes[0].children && nodes[0].children.length > 0) {
                        alert("包含下级，无法删除。");
                    } else {
                        if (confirm("该操作会将关联数据同步删除，是否确认删除？") == true) {
                            $.ajax({
                                type: "Post",
                                url: "/Design/Delete",
                                data: {"id": nodes[0].id},
                                success: function (data) {
                                    if (data.result == "Success") {
                                        zTree.removeNode(nodes[0]);
                                    } else {
                                        alert("删除失败。");
                                    }
                                }
                            });
                        }
                        ;
                    }
                }
            };
        </script>
    </head>
    <body>
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <!--<div id="rMenu" style="z-index:100;">
            <ul>
                <li id="m_add" onclick="addTreeNode();">新增节点</li>
                <li id="m_del" onclick="removeTreeNode();">删除节点</li>
                <li id="m_edit" onclick="editTreeNode();" style="border-bottom:1px solid #cecece">编辑节点</li><li id="m_left">升级</li>
                <li id="m_right">降级</li>
                <li id="m_up">上移</li>
                <li id="m_down" style="border-bottom:1px solid #cecece">下移</li>
                <li id="m_reset" onclick="resetTree();">重置节点</li>
                <li id="m_open" onclick="treeOpen()">展开所有</li>
                <li id="m_stop" onclick="treeStop()">收起所有</li>
            </ul>
        </div>-->
    </body>
</html>